<template>
  <div id="dormadminmanage" style="height:100%;width:100%;padding: 0;background-image: linear-gradient(to right top, #a1d1ff, #c2daff, #dce5ff, #f0f1ff, #ffffff);">
    <div class="searchwrapper">
      <p>姓名</p>
      <el-input
          placeholder="请输入内容"
          prefix-icon="el-icon-search"
          v-model="dormadminName"
          style="width: 200px;margin-right:20px"
      >
      </el-input>
      <p>工号</p>
      <el-input
          placeholder="请输入内容"
          prefix-icon="el-icon-search"
          v-model="dormadminAccount"
          style="width: 200px;margin-right: 100px"
      >
      </el-input>
      <el-button style="margin-left: 20px" type="primary" icon="el-icon-search" @click="searchDormAdminByNameAndAccount">搜索</el-button>
      <el-button icon="el-icon-circle-plus-outline" size="small" type="primary" style="width: 100px;margin-left: 30px" @click="addOne">添加</el-button>
      <div style="width: 500px"></div>
    </div>
    <div id="table" style="margin-left: 50px;margin-right: 50px">
      <el-table
          :data="dormadminList"
          width="90%">
        <el-table-column
            prop="dormitoryAdmin.account"
            label="工号"
            width="150">
        </el-table-column>
        <el-table-column
            prop="dormitoryAdmin.name"
            label="姓名">
        </el-table-column>
        <el-table-column
            prop="dormitoryAdmin.gender"
            label="性别">
        </el-table-column>
        <el-table-column
            prop="dormitoryAdmin.nation"
            label="民族">
        </el-table-column>
        <el-table-column
            prop="buildingName"
            label="管理楼栋">
        </el-table-column>
        <el-table-column
            fixed="right"
            label="操作"
            width="300">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="showDormAdmin(scope.row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNo"
          :page-sizes="[2,5,10]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper">
      </el-pagination>
      <dorm-admin-dialog @ok="searchDormAdminByNameAndAccount" ref="DormAdminEditDialog"></dorm-admin-dialog>
      <dorm-admin-add-dialog @ok="searchDormAdminByNameAndAccount" ref="DormAdminAddDialog"></dorm-admin-add-dialog>
    </div>
  </div>
</template>

<script>
import {_searchDormAdminByNameAndAccount, _dormAdminAll, _buildingAll} from '../../../api/super_admin'
import dormAdminDialog from '../components/editComponents/DormAdminDialog.vue'
import dormAdminAddDialog from '../components/addComponents/DormAdminAddDialog.vue'
export default {
  name: 'DormAdminManage',
  components: {
    dormAdminDialog,
    dormAdminAddDialog
  },
  created () {
    const DOT = {
      pageSize: 10,
      pageNo: 1,
      data: {name: ''}
    }
    _dormAdminAll(DOT).then(res => {
      if (res.status) {
        this.dormadminList = res.data
      } else {
        this.$message({
          message: res.message,
          type: 'error'
        })
      }
    })
    const DOT2 = {
      pageSize: 10000,
      pageNo: 1,
      data: {name: ''}
    }
    _buildingAll(DOT2).then(res => {
      if (res.status) {
        this.buildingList = res.data
      } else {
        this.$message({
          message: res.message,
          type: 'error'
        })
      }
    })
  },
  data () {
    return {
      dormadminList: [
        {
          dormitoryAdmin: {
            name: '潘姐红',
            gender: '女',
            nation: '汉族',
            account: 'd4656155454',
            password: '12345678',
            buildingID: null
          },
          buildingName: '西苑1舍'
        }
      ],
      dormadminName: '',
      preDormAdminName: '',
      dormadminAccount: '',
      preDormAdminAccount: '',
      total: 0,
      pageNo: 1,
      pageSize: 10
    }
  },
  methods: {
    getFirstPage () {
      const DOT = {
        pageSize: this.pageSize,
        pageNo: 1,
        data: {
          dormadminName: this.preDormAdminName,
          dormadminAccount: this.preDormAdminAccount
        }
      }
      _searchDormAdminByNameAndAccount(DOT).then(res => {
        if (res.status) {
          this.dormadminList = res.data
          this.pageNo = 1
        } else {
          this.$message({
            message: res.message,
            type: 'error'
          })
        }
      })
    },
    getDormAdmin () {
      const DOT = {
        pageSize: this.pageSize,
        pageNo: this.pageNo,
        data: {
          dormadminName: this.preDormAdminName,
          dormadminAccount: this.preDormAdminAccount
        }
      }
      _searchDormAdminByNameAndAccount(DOT).then(res => {
        if (res.status) {
          this.dormadminList = res.data
        } else {
          this.$message({
            message: res.message,
            type: 'error'
          })
        }
      })
    },
    searchDormAdminByNameAndAccount () {
      this.preDormAdminName = this.dormadminName
      this.preDormAdminAccount = this.dormadminAccount
      this.getFirstPage()
    },
    handleSizeChange (value) {
      this.pageSize = value
      this.getFirstPage()
    },
    handleCurrentChange (value) {
      this.pageNo = value
      this.getDormAdmin()
    },
    showDormAdmin (value) {
      this.$refs.DormAdminEditDialog.show(value)
    },
    addOne () {
      this.$refs.DormAdminAddDialog.show()
    }
  }
}
</script>

<style scoped>
.searchwrapper {
  margin-top: 10px;
  display: flex; /* 使用 Flexbox 布局 */
  align-items: center; /* 垂直居中对齐 */
}
.searchwrapper p {
  margin-left: 200px;
  margin-right: 10px; /* 调整 p 标签与 el-input 之间的间距 */
  font-weight: bold; /* 可选：设置 p 标签的字体加粗 */
}

.searchwrapper .el-input {
  flex: 1; /* el-input 自动填充剩余空间 */
}
</style>
